<template>
	<div class="div100 margin24">
	        <div style="text-align: center; font-size: 2rem;
	          font-weight: 550; margin-bottom: 2rem">
	            <span>{{ news.title }}</span>
	        </div>
	
	        <div
	            style="text-align: center; font-size: 1.2rem; border: 1px dotted lightgrey; height: 3rem; line-height: 3rem">
	            <span style="margin-right: .3rem">发布时间: </span>
	            <span style="margin-right: 1.5rem">{{ news.pubTime }}</span>
	            <span style="margin-right: .3rem">作者: </span>
	            <span style="margin-right: 1.5rem">{{ news.author }}</span>
	            <span style="margin-right: .3rem">阅读: </span>
	            <span>{{ (news.readTimes) }}</span>
	        </div>
	
	        <div style="font-size: 1.5rem; line-height: 2.5rem" v-html="news.content">
	        </div>
	
	        <div style="margin-top: 5rem;">
	            <h1 style="font-size: 2.5rem; color: #0d5396; margin-bottom: 1rem">发表评论</h1>
	            <el-input
	                type="textarea"
	                :rows="10"
	                placeholder="请输入内容"
	                v-model="comment">
	            </el-input>
	            <div style="margin-top: .5rem">
	                <el-button type="primary" style="float: right" @click="pubComment">发表</el-button>
	            </div>
	        </div>
	
	        <div style="margin-top: 5rem;">
	            <h1 style="font-size: 2.5rem; color: #0d5396; margin-bottom: 1rem">评论列表</h1>
	            <template v-if="commentList.length > 0">
	                <news-comment v-for="item in commentList"
	                              :user-name="item.userName"
	                              :comment="item.comment"
	                              :comment-time="item.commentTime"
	                              :key="item.id"></news-comment>
	            </template>
	            <template v-else>
	                <div style="text-align: center; padding: 3rem 0; font-size: 2rem; color: #8b94a2">
	                    暂时还没有评论，快来发表吧~~
	                </div>
	            </template>
	
	        </div>
	
	    </div>
</template>

<script>
	import axios from 'axios'
	axios.defaults.baseURL = '/api'
	import NewsComment from '../../components/NewsComment.vue'
	export default {
		components:{NewsComment},
		data() {
			return {
				news: {
					id: 0,
					category: '',
					title: '',
					pubTime: '',
					readTimes: 0,
					content: '',
					author: '',
				},
				commentList:[],//评论列表
				comment:''//发表的评论
			}
		},
		mounted() {
			//加载新闻详情
			axios.get('news/findOne',{
				params:{
					id:this.$route.params.id
				}
			}).then(response => {
				this.news = response.data
			})
			//加载评论列表
			axios.get('comment',{
				params:{
					newsId:this.$route.params.id
				}
			}).then(response => {
				this.commentList = response.data
			})
		}
	}
</script>

<style>
	.news-detail div{
		padding: 2rem;
		font-size: 1.5rem;
	}
</style>